<script>
// npm i @tinymce/tinymce-vue
// cnpm i tinymce
import Editor from '@tinymce/tinymce-vue'

export default {
    name: 'editor',
    data() {
        return {
            htmlStr: '',
            init: {
                // 中文包的路径
                language_url: 'public/tinymce/langs/zh-Hans.js',
                language: 'zh-Hans',
                plugins: 'image link code insertdatetime quickbars',
            }
        }
    },
    methods: {
        btnClick() {
            console.log(this.htmlStr);
            // 发送数据请求，将用户输入的内容发送给服务器做保留即可
        },
        change(event) {
            // 获取富文本编辑器中的内容
            // console.log(event.level.content);
            this.htmlStr = event.level.content
        }
    },
    components: {
        Editor
    }
}
</script>
<template>
    <h2>
        富文本编辑器
        <el-button @click="btnClick">提交</el-button>
    </h2>
    <Editor :init="init" @change="change" />

    <div v-html="html"></div>
</template>